<template>
	<div class="myupload">
		<!-- 头部 -->
		<div class="my_header">
			<i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="gomy"></i>
			<div class="top1">查询记录</div>
			<div class="select" style="display:none">
				<img src="static/icon_pc/icon/select_05.png" alt="">
				<span @click="showMask()">筛选</span>
			</div>
		</div>
		<!-- 员工信息1 -->
		<div class="info" v-for="(item,index) in selectList" :key="index">
			<div class="infor">
				<div>关键词语：<span class="xinxi">{{item.keyword}}</span></div>
				<div>记录数量：<span class="xinxi">{{item.num}}</span></div>
				<div>查询时间：<span class="xinxi">{{item.add_time}}</span></div>
				<div id="detail">
					<ul class="cont">
						<li @click="uploaddetail(item.keyword)" class="blue">
							详情
						</li>
						<li @click="reSearch()" class="blue">
							重新查询
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 遮罩层内容 -->
		<!-- 遮罩层背景 -->
		<div class="mask" v-if="tos" @click="maskHide()"></div>
		<!-- 弹出内容 -->
		<div v-if="tos" class="content">
			<h4>名单类型</h4>
			<ul>
				<div v-for="(item,index) in losttypelist">
					<li :class="{active:index==clicktab}" @click="select(index,item.lost_type_id)"><span v-text="item.name"></span></li>
				</div>
			</ul>

			<div class="uptime">
				<h4>上传时间</h4>
				<div class="timeblock">
					<input type="text" readonly="readonly" placeholder="开始时间" @click="openstimes" v-model="s_time"> <span>至</span>
					<input id="datetime" type="text" readonly="readonly" placeholder="结束时间" @click="openetime" v-model="e_time">
				</div>
			</div>
			<div class="button-bm">
				<span @click="cleardata">清空</span>
				<span class="sure">确定</span>
			</div>

			<!-- 开始时间-->
			<van-popup v-model="openstime" position="bottom" :overlay="false">
				<van-datetime-picker v-model="currentDate" type="date" @cancel="onCancel" @confirm="onConfirm" />
			</van-popup>
			<!--结束时间-->
			<!-- 开始时间-->
			<van-popup v-model="openendtime" position="bottom" :overlay="false">
				<van-datetime-picker v-model="currentDate" type="date" @cancel="onCancel" @confirm="onConfirm1" />
			</van-popup>
		</div>
	</div>
</template>
<script>
	import { formatDate } from "../../../static/js/date.js";
	export default {
		data() {
			return {
				tos: false,
				selectList: {},
				clicktab: 0,
				losttypelist: [],
				lost_type_id: '',
				openstime: false,
				openendtime: false,
				s_time: '',
				e_time: '',
				currentDate: new Date()
			}
		},
		created() {

			// 查询记录
			$.ajax({
				url: 'http://zcapi.hrgsxt.cn/api/User_record/search',
				type: 'get',
				dataType: 'json',
				data: {
					token: localStorage.getItem("token"),
					type: 1
				},
				success: res => {
					if(res.code === 200) {
						console.log(res)
						this.selectList = res.data
						// console.log(this.selectList)
					}
				}
			})
			// 判断隐藏状态，动态改变隐藏字体颜色
			// console.log(this.selectList.is_show)
			this.gettypelist();
		},
		methods: {

			gomy() {
				var that = this;
				$.ajax({
					type: "get",
					url: "http://zcapi.hrgsxt.cn/api/User/index",
					data: {
						token: localStorage.getItem("token")
					},
					cache: false,
					dataType: "json",
					success: function(data) {
						if(data.code == 200) {
							that.type = data.data.type;
							console.log(data.data.type + "用户类型");
							if(data.data.type == 1) {
								that.$router.push({
									path: './Personalcenter',

								});
							} else if(data.data.type == 2) {
								that.$router.push({
									path: './corporatecenter',

								});
							}
						}
					}
				});
			},
			//清空
			cleardata() {
				this.clicktab = 0;
				this.s_time = '',
					this.e_time = ''
			},

			onConfirm() {
				// console.log(this.s_time);
				this.openstime = false;
				var time = this.formatDate(this.currentDate);
				// console.log(time);
				this.s_time = time;

			},
			onConfirm1() {
				// console.log(this.e_time);
				this.openendtime = false;
				var time = this.formatDate(this.currentDate);
				this.e_time = time;

			},
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd');
			},
			onCancel() {
				this.openstime = false;
				this.openendtime = false;
				// console.log(this.show);
			},

			//开始时间
			openstimes() {
				this.openstime = true
			},
			//结束时间
			openetime() {
				this.openendtime = true
			},
			select(selectid, lost_type_id) {
				this.clicktab = selectid,
					this.lost_type_id = lost_type_id
			},

			//获取名单类型
			gettypelist() {
				var that = this;
				$.ajax({
					type: "get",
					url: "http://zcapi.hrgsxt.cn/api/Welcome/lost_type",
					data: {},
					cache: false,
					dataType: "json",
					success: function(data) {
						if(data.code == 200) {
							console.log(data)
							that.losttypelist = data.data
						} else {

						}

					}
				});
			},

			// 显示遮罩层
			showMask() {
				if(this.tos == false) {
					this.tos = true;
				} else {
					this.tos = false;
				}
			},

			// 隐藏遮罩层
			maskHide() {
				this.tos = false
			},
			// 点击详情，页面根据关键字跳转到详情
			uploaddetail: function(keyword) {
				this.$router.push({
					path: './searchlist',
					query: {
						keyword: keyword,
						type: 1

					}
				});
			},

			// 重新查询
			reSearch() {
				this.$router.push({
					path: '/'
				})
			}

		}
	}
</script>

<style scoped>
	.gary {
		color: #666;
	}
	
	.blue {
		color: rgba(0, 133, 240, 1);
	}
	
	.myupload {
		background-color: #fff;
		padding-top: 0.88rem;
	}
	/* 头部 */
	
	.my_header {
		width: 100%;
		height: .88rem;
		background: rgba(0, 133, 240, 1);
		text-align: center;
		color: #fff;
		line-height: .88rem;
		position: relative;
		padding: 0 .3rem;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
	}
	
	.my_header i {
		font-size: .4rem;
		float: left;
		line-height: .88rem;
	}
	
	.top1 {
		display: inline-block;
		/* margin-left: -5%; */
		margin-left: -.17rem
	}
	
	.select {
		float: right;
	}
	
	.select img {
		width: .3rem;
		height: .32rem;
	}
	
	.select span {
		font-size: .28rem;
	}
	/* 员工信息 */
	
	.info {
		margin-top: .32rem;
		position: relative;
		border: .001rem dashed #efefef;
	}
	
	.infor {
		width: 92%;
		height: 2.2rem;
		line-height: .6rem;
		background-color: #fff;
		border: .01rem solid #E2E2E2;
		margin: 0 auto;
		padding: .2rem;
		position: relative;
	}
	
	.infor div {
		height: .6rem;
		font-size: .26rem;
		color: #999;
	}
	
	.infor .xinxi {
		color: #333;
	}
	/* 查看详情 */
	
	#detail {
		width: .64rem;
		height: 2.2rem;
		position: absolute;
		right: 0;
		top: 0;
		border-left: .001rem solid #E2E2E2;
	}
	
	#detail .cont {
		font-size: .26rem;
	}
	
	#detail .cont li {
		font-size: .24rem;
		line-height: .26rem;
		padding: .2rem .2rem .31rem .2rem;
	}
	
	a {
		color: #0085F0;
	}
	
	.cont li:first-child {
		height: .84rem;
		box-sizing: border-box;
		border-bottom: .001rem solid #E2E2E2;
	}
	
	.fengxian {
		float: left;
		display: inline;
	}
	
	.grand {
		display: inline;
		line-height: .4rem;
		padding-right: .25rem;
		float: left;
	}
	
	.grand li {
		float: right;
		margin-left: .01rem;
	}
	/* 遮罩层部分 */
	
	.mask {
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.4;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.content {
		width: 92%;
		height: 100%;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 9;
		padding: .5rem .3rem 0 .3rem;
	}
	
	.content h4 {
		height: .6rem;
		font-size: .3rem;
		color: #333;
	}
	
	.content ul {
		overflow: hidden;
	}
	
	.content .active {
		background-color: #0085F0;
		color: #fff;
	}
	
	.content ul li {
		padding: 0px 14px;
		height: .72rem;
		color: #666;
		background-color: #F8F8F8;
		font-size: .26rem;
		line-height: .72rem;
		text-align: center;
		border-radius: .05rem;
		float: left;
		margin-bottom: .2rem;
		margin-right: 10px;
	}
	
	.content ul li:nth-child(3n-1) {
		margin-right: .2rem;
		margin-left: .2rem;
	}
	
	.uptime {
		height: .72rem;
		line-height: .72rem;
	}
	
	.uptime h4 {
		margin-top: .4rem;
		margin-bottom: -.15rem;
	}
	
	.uptime input {
		width: 43% !important;
		height: 0.6rem;
	}
	
	#datetime {
		margin-left: .15rem;
		margin-right: 0rem;
	}
	
	.button-bm {
		width: 100%;
		height: .88rem;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.button-bm span {
		width: 50%;
		height: .88rem;
		color: #333;
		font-size: .32rem;
		text-align: center;
		line-height: .88rem;
		float: left;
		border-top: .001rem solid #E2E2E2;
	}
	
	.button-bm .sure {
		color: #fff;
		background-color: #0085F0;
	}
</style>